<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        class Myform extends React.Component{
	        constructor(props){
                super(props);
		        this.state = {iNum:10};
	}
	// ev指的是系统自动产生的事件对象
    // ev.target 指的是发生事件的元素
    fnNameInput(ev){
        this.setState({
            iNum:ev.target.value
        })
    }
	render(){
        return(
            <div>
            	<p>用户名称是:{this.state.iNum} </p>
        		<input type='text' value = {this.state.iNum} onChange={this.fnNameInput.bind(this)}/>
            </div>
        );
    }}
    ReactDOM.render(<Myform/>, document.getElementById('root'))
    </script>
</body>
</html>